<script setup lang="ts">
import { computed, onMounted, ref, shallowRef } from 'vue'
import useEcharts, { type EChartsOption } from '~/composables/chart'

import BlockHead from './block-head.vue'

import defaults from './default-chart-option'

import icon1 from './item-two-legend-icon-1.png'
import icon2 from './item-two-legend-icon-2.png'
import icon3 from './item-two-legend-icon-3.png'
import icon4 from './item-two-legend-icon-4.png'
import icon5 from './item-two-legend-icon-5.png'
import icon6 from './item-two-legend-icon-6.png'
import icon7 from './item-two-legend-icon-7.png'
import type { AgeInfo } from '../type'

defineOptions({
  name: 'ItemTwo',
})

const props = defineProps<{
  data: AgeInfo
  avgAge: number
}>()

const icons = [icon1, icon2, icon3, icon4, icon5, icon6, icon7]

const { chartRef, setOption } = useEcharts()

const data = shallowRef<{ name: string, value: string }[]>([])
const option = computed<EChartsOption>(() => {
  return {
    tooltip: {
      ...defaults.tooltip,
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: '60%',
      top: 'center',
      itemHeight: 12,
      itemWidth: 12,
      textStyle: {
        fontSize: 12,
        lineHeight: 20,
      },
      data: data.value.map((v, i) => {
        return {
          name: v.name,
          icon: `image://${icons[i]}`,
          itemStyle: {
            opacity: 1,
          },
        }
      }),
      formatter: (name: string) => {
        return `${name} （${data.value[data.value.findIndex(v => v.name === name)].value}人）`
      },
    },
    color: ['#D0E2F9', '#2E89FA', '#17E6FF', '#5AFF44', '#F9C824', '#F37405', '#F5474B'],
    series: [
      {
        type: 'pie',
        radius: ['50%', '66%'],
        center: ['30%', '50%'],
        data: data.value,
        label: { show: false },
        itemStyle: {
          opacity: 0.2,
        },
        emphasis: {
          disabled: true,
        },
        tooltip: { show: false },
      },
      {
        type: 'pie',
        radius: ['60%', '66%'],
        center: ['30%', '50%'],
        data: data.value,
        label: { show: false },
        itemStyle: {
          opacity: 1,
        },
      },
      {
        name: 'outer circle',
        type: 'pie',
        radius: ['70%', '72%'],
        center: ['30%', '50%'],
        data: [{ value: 100, name: ' ' }],
        label: { show: false },
        tooltip: { show: false },
        itemStyle: {
          opacity: 0.2,
          color: '#C0E7FF',
        },
      },
      {
        name: 'outer circle2',
        type: 'pie',
        startAngle: 160,
        radius: ['76%', '79%'],
        center: ['30%', '50%'],
        data: [{ value: 40, name: '1' }, { value: 60, name: '2' }],
        label: { show: false },
        tooltip: { show: false },
        color: ['rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 0.2)'],
      },
    ],
  }
})

const show = ref(false)

onMounted(() => {
  data.value = Object.keys(props.data).map((v) => {
    return {
      name: v,
      value: props.data[v],
    }
  })
  setOption(option.value)
  setTimeout(() => {
    // doResize()
    show.value = true
  }, 500)
})
</script>

<template>
  <div class="flex flex-col">
    <BlockHead title="年龄段分布" />
    <div class="block-body h-70 w-full flex flex-auto flex-wrap">
      <div class="relative h-full w-full">
        <div ref="chartRef" style="width:100%;height:100%" />
        <Transition
          enter-active-class="animate__animated animate__fadeIn animate__delay-2s"
          leave-active-class="animate__animated animate__fadeOut"
        >
          <div v-if="show" class="inner-circle p-4">
            <div class="text-2xl text-[#17E6FF] font-pmzd">
              {{ avgAge }}
            </div>
            <div class="mt-1 whitespace-normal text-center text-sm line-height-none opacity-60">
              平均年龄（岁）
            </div>
          </div>
        </Transition>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.inner-circle {
  position: absolute;
  top: 50%;
  left: calc(30% - 12%);
  transform: translateY(-50%);
  width: 24%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(192, 231, 255, 0.3);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
